<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%@ page import="java.util.ArrayList" %>
    <%@ page import="com.storyroad.responseClasses.StoryView" %>
    <%@ page import="com.storyroad.responseClasses.MapPins" %>
    <%@ page import="com.storyroad.responseClasses.NotificationObject" %>

    <% 
    	
    	
    	ArrayList<StoryView> mostRecentstories = 
    		(ArrayList<StoryView>)request.getAttribute("mostRecentStories");
    
    	ArrayList<StoryView> highestRatedStories = 
    		(ArrayList<StoryView>)request.getAttribute("highestRatedStories");
    	
    	ArrayList<MapPins> mapPins =
    			(ArrayList<MapPins>)request.getAttribute("mapPins");
    	
    	ArrayList<NotificationObject> notifications = 
    			(ArrayList<NotificationObject>)request.getAttribute("notifications");
    			
    	
    	/*ArrayList<MapPins> mapPins = 
        		(ArrayList<MapPins>)request.getAttribute("mapPins");*/
    %>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

    <title>Story Road</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/mainpage.css" rel="stylesheet">

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map;
    var lat;
    var long;
    var centerPoint;
      function initialize() {
        var mapOptions = {
          zoom: 10,
          center: new google.maps.LatLng(41.100, 28.944),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        
        <% for(int i=0; i<mapPins.size();i++) { %>
	        lat = (<%=String.valueOf(mapPins.get(i).getX_coord())%>);
	        long = (<%=String.valueOf(mapPins.get(i).getY_coord())%>);
	        centerPoint = new google.maps.LatLng(lat, long);
	        var contentString = '<a id="main-page-list" style="margin-left:10px; font-size:13pt; font-weight:bold"'+
            'href="ReadStory?story_id=' + "<% out.print(mapPins.get(i).getS_id());%>"+
            '&request_type=Web"> '+
            "<% out.print(mapPins.get(i).getTitle()); %>" +
             '</a>'+
            '<p style="margin-top:10px; font-size:10pt" id="tag"><b>Rating: </b>'+
            "<% out.print(mapPins.get(i).getRating()); %>" +
            '</p>'+
            '<p id="tag" style="font-size:10pt"><b>Tags: </b>'+
            "<% out.print(mapPins.get(i).getTags()); %>" +
            '</p>';
	        placeMarker(centerPoint, contentString);

        <% } %>
      }
      
      function placeMarker(location, contentString) {
          
            var marker = new google.maps.Marker({
              position: location,
              map: map
            });
            
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
           
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
              });
        }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body background="img/back_nologo.png">
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <img src="img/logo_writing.png" id="top_logo">
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="MainPage">Home Page</a></li>
            <li><a href="GetRecommendations">Recommendations</a></li>
            <li><a href="Search.jsp">Search Stories</a></li>
            <li><a href="GetFollowers">Following</a></li>
          </ul>
          <ul class="nav navbar-nav" id="profile_buttons">
            <li><a href="GetProfile">My Profile</a></li>
            <li><a href="Logout">Logout</a></li>
          </ul>
        </div><!-- /.nav-collapse -->

      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="container">
      <div class="row">
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="width:30%">
          <div class="well sidebar-nav" id="main-page-list-container">
            <ul class="nav" id="main-page-list">
              <li id="mainpagelistheader">Most Recent</li>
              <% for(int i=0; i<mostRecentstories.size();i++){ %>
              <li id="mainpagelist" class="active">
              <a 
              href="ReadStory?story_id=<% out.print(String.valueOf(mostRecentstories.get(i).getS_id()).trim()); %>&request_type=Web">
              <% out.print(mostRecentstories.get(i).getTitle()); %>
              </a>
              <p id="tag">Rating: 
              <% out.print(mostRecentstories.get(i).getAvgRating()); %>
              </p>
              <p id="tag">
              <% out.print(mostRecentstories.get(i).getTags()); %>
              </p>
              </li>
              <% } %>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div id="centerPartMain">
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="create-new-story"
         onclick="window.location = 'CreateStory.jsp';"
        >
        
        		Create a New Story</button>
          <div id="map-canvas"></div>
           <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="notification-bar" role="navigation">
          <div class="well sidebar-nav" id="notif-container">
            <ul class="nav" id="notif-list">
              <li id="notif-header">Notifications</li>
              <%for(NotificationObject notif : notifications){ %>
              <li id="mainpagelist" class="active">
              <a
              <%if(notif.isStory()){ %> 
              href="<%out.print("ReadStory?story_id="+notif.getContentId()); %>"
              <%}else{ %>
              href="<%out.print("GetProfile?targetname="+notif.getUsername()); %>"
              <%} %>
              ><%out.print(notif.getMessage()); %></a>
              </li>
            <%} %>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        </div>
         <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="width:30%;float:right">
          <div class="well sidebar-nav" id="main-page-list-container">
            <ul class="nav" id="main-page-list">
              <li id="mainpagelistheader">Highest Rated</li>
              <% for(int i=0; i<highestRatedStories.size();i++){ %>
              <li id="mainpagelist" class="active">
              <a 
              href="ReadStory?story_id=<% out.print(String.valueOf(highestRatedStories.get(i).getS_id()).trim()); %>&request_type=Web">
              <% out.print(highestRatedStories.get(i).getTitle()); %>
              </a>
              <p id="tag">
              Rating: 
              <% out.print(highestRatedStories.get(i).getAvgRating()); %>
              </p>
              <p id="tag">
              <% out.print(highestRatedStories.get(i).getTags()); %>
              </p>
              </li>
              <% } %>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
      </div>
    </div><!--/.container-->



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="bootstrap/assets/js/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/mainpage.js"></script>
  </body>
</html>
